<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" ref="refForm">
      <el-form-item label="账号：" prop="account" >
        <el-input v-model="form.username" placeholder="请输入账号" @keyup.enter.native="handleFilter"></el-input>
      </el-form-item>

      <el-form-item label="领奖时间：" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>

<!--      <el-form-item label="奖品类型：" prop="rewardType"  >-->
<!--        <el-select-->
<!--          v-model="form.rewardType"-->
<!--          :collapse-tags="true"-->
<!--          width="100%">-->
<!--          <el-option-->
<!--            v-for="item in rewardTypeList"-->
<!--            :label="item.title"-->
<!--            :key="item.value"-->
<!--            :value="item.value"-->
<!--          ></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="奖品：" prop="rewardId"  >
        <el-select
          v-model="form.rewardId"
          :collapse-tags="true"
          width="100%">
          <el-option
            v-for="item in prizeList"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button @click="handleResetForm('refForm')">重置</el-button>
    </el-form>

    <div class="table-container">
      <el-table
        v-loading="loading"
        border
        :data="tableData.list"
      >
        <el-table-column label="账号" align="center" prop="username" width="200"></el-table-column>
        <el-table-column label="获奖时间" align="center" prop="date" width="200">
        </el-table-column>
        <el-table-column label="奖品类型" align="center" prop="rewardType" width="200">
          <template slot-scope="{row}">
            {{toRewardStr(row.rewardType)}}
          </template>
        </el-table-column>
        <el-table-column label="奖品" align="center" prop="reward" width="200">
          <template slot-scope="{row}">
            {{row.reward | toCNY}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remarks"></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="{row}">
            <span @click="handleRemark(row.id)" class="remark">备注</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total">
      </el-pagination>
    </div>

    <div
      class="dialog-container"
      v-if="dialogVisible">
      <el-dialog
        :close-on-click-modal=false
        :close-on-press-escape=false
        title="填写备注"
        :visible.sync="dialogVisible"
        width="30%"
        @close="handleClose">
        <el-input :class="tipFlag?'danger':''" type="textarea" v-model="remarkData.remarks" :rows="5"></el-input>
        <div class="tip-wrap">
          <p v-if="tipFlag" class="tip">请填写备注</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { rewardTypeList, prizeList } from './data';
  import { form, pickerOption, grid } from '@/build';
  import getCommand from '@/mixins/getCommand';
  import { getAmericaCupList, addAmericaCupRemark } from '@/services/api/activity';

  export default {
    name: 'list-two',

    mixins: [form, pickerOption, getCommand, grid],

    data() {
      const [start, end] = this.getTime();

      return {
        loading: false,
        dialogVisible: false,
        form: {
          time: [start, end],
          username: undefined,
          rewardType: undefined,
          rewardId: undefined,
        },
        filters: {
          page: 1,
          size: 20
        },
        rewardTypeList,
        prizeList,
        remarkData: {
          remarks: undefined,
          id: undefined
        },
        tableData: {
          list: [
          ],
          total: 0,
        },
        tipFlag: false,
      }
    },

    methods: {
      getTime() {
        const start = new Date();
        const end = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1));
        return [moment(start).format('YYYY-MM-DD 00:00:00'), moment(end).format('YYYY-MM-DD 23:59:59')]
      },
      toRewardStr(type) {
        return _.find(this.rewardTypeList, {value: type}).title;
      },
      resetTextarea() {
        this.dialogVisible = false;
        this.remarkData.remarks = '';
      },
      handleRemark(id) {
        this.remarkData.id = id;
        this.dialogVisible = true;
      },
      handleConfirm() {
        if(!this.remarkData.remarks) {
          this.tipFlag = true;
          return;
        }
        this.tipFlag = false;
        this.doGet({ action: 'addRemark' });
      },
      handleCancel() {
        this.tipFlag = false;
        this.resetTextarea();
      },
      handleClose() {
        this.handleCancel();
      },
      handleFilter() {
        const { time } = this.form;
        let startTime;
        let endTime;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = time[0];
          endTime = time[1];
        }
        this.filters = {
          ...this.filters, ...this.form, startTime, endTime,
        };
        this.gridSearch();
      },
      handleResetForm(formName) {
        this.resetForm(formName);
        this.form.rewardType = undefined;
        this.form.rewardId = undefined;
        this.form.time = this.getTime();
        this.handleFilter();
      },
    },

    filters: {
      toCNY(val){
        return val + '元'
      }
    },

    mounted() {
      this.bindGet(addAmericaCupRemark, '', {
        action: 'addRemark',
        sendingData: 'remarkData',
        callback: ([result,data]) => {
          if(result) {
            this.$message({
              message: '备注填写成功',
              type: 'success'
            })
          }else{
            this.$message({
              message: data.message,
              type: 'success'
            })
          }
          this.handleFilter();
          this.resetTextarea();
        }
      });

      this.bindGet(getAmericaCupList, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.handleFilter();
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    .table-container {
      .remark {
        text-decoration: underline;
        color: #66B1FF;
        cursor: pointer;
      }
    }
    .dialog-container {
      .tip-wrap {
        height: 20px;
        .tip {
          font-size: 12px;
          color: red;
          margin: 0;
          line-height: 20px;
        }
      }
      .danger {
        /deep/ .el-textarea__inner {
          border: 1px solid #FF0000 !important;
        }
      }
    }
  }
</style>
